<!--  -->
<template>
  <div class="">
    <template v-if="goodsDetail">
      <div class="cont">
        <div class="left">
          <div>
            <p class="title">{{ goodsDetail.title }}</p>
            <p class="price">
              {{ $t("公共.货币符号") }} {{ goodsDetail.price }}
            </p>
            <div class="type">
              <p class="font24" style="margin-top: 55px">{{ t("选择型号") }}</p>
              <div class="check">
                <el-select
                  v-model="value1"
                  :placeholder="t('请选择')"
                  style="margin-right: 10px"
                  value-key="id"
                  @change="modeChange(0)"
                >
                  <el-option
                    v-for="item in typeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-model="value2"
                  :placeholder="t('请选择')"
                  value-key="id"
                  @change="modeChange(1)"
                >
                  <el-option
                    v-for="item in value1.children"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="style">
              <p class="font24">{{ t("选择款式") }}</p>
              <p class="font20 fw400 ptb10">
                {{ t("MagSale兼容极致强韧防摔手机壳") }}
              </p>
              <ul>
                <!-- <li class="active">
                                <img src="../../assets/images/home/style.png" alt="">
                                <p>￥799</p> 
                            </li> -->
                <li
                  v-for="(item, index) in goodsDetail.spu[0].item"
                  :key="index"
                  @click="skuClick(item, index)"
                  :active="index == skuSelect"
                >
                  <img class="cover-img" :src="item.thumbnail | imgSrc" />
                  <p>{{ $t("公共.货币符号") }} {{ item.price }}</p>
                </li>
              </ul>
            </div>
            <div class="color">
              <span
                class="font24"
                style="
                  margin-right: 20px;
                  font-weight: 500;
                  font-size: 24px;
                  color: #222222;
                "
                >{{ t("选择颜色") }}</span
              >
              <!-- <span class="font20 fw400">{{ goodsDetail.spu[1].item[colorSelect].name }}</span> -->
              <ul>
                <!-- 后台反的颜色 -->
                <li
                  v-for="(obj, index) in goodsDetail.spu[1].item"
                  :key="index"
                  :active="index == colorSelect"
                  @click="colorClick(obj, index)"
                >
                  <!-- {{ obj.name }} -->
                  <img
                    class="color-img"
                    :src="obj.color | imgSrc"
                    alt=""
                    srcset=""
                  />
                </li>
              </ul>
            </div>
            <div class="shopping">
              <button @click="addcar()">{{ t("加入购物车") }}</button>
              <div class="pay">
                <ul>
                  <li>
                    <img src="../../assets/images/home/zfb.png" alt="" />
                  </li>
                  <li>
                    <img src="../../assets/images/home/wx.png" alt="" />
                  </li>
                  <li>
                    <img src="../../assets/images/home/pp.png" alt="" />
                  </li>
                  <li>
                    <img src="../../assets/images/home/yhk.png" alt="" />
                  </li>
                </ul>
                <p>{{ t("支付的付款方式") }}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="right" v-if="skuObj">
          <div class="show">
            <!-- <img class="show-img" src="../../assets/images/home/phone.png" alt=""> -->
            <img
              class="show-img"
              :src="skuObj.images[skuImgSelect] | imgSrc"
              alt=""
            />
            <!-- <div class="encoding" v-if="">
              <img src="" alt="" />
              <p>29036521258</p>
            </div> -->
            <div class="encoding">
              <img :src="skuObj.sn_qr" alt="" />
              <p style="text-align: center; margin-top: 10px">
                {{ skuObj.sn }}
              </p>
            </div>
          </div>
          <div class="swiper">
            <div class="swiper-div">
              <ul>
                <!-- 最右侧的背景图片 -->
                <li
                  v-for="(item, index) in skuObj.images"
                  :key="index"
                  @click="skuImgSelect = index"
                >
                  <el-image
                    class="swiper-img"
                    :src="item | imgSrc"
                    fit="contain"
                  ></el-image>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div
        class="details"
        v-if="goodsDetail"
        v-html="goodsDetail.content"
      ></div>
      <div class="leftnav">
        <img src="../../assets/images/home/service.png" alt="" />
        <router-link
          tag="img"
          :src="require('../../assets/images/home/car.png')"
          to="shoppingCart"
        ></router-link>
      </div>
    </template>
  </div>
</template>

<script>
import {
  getGoodsModelList,
  getGoodsDetail,
  getGoodsSku,
  addShopCart,
} from "@/utils/api";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      typeList: [],
      value1: "",
      value2: "",
      goodsDetail: null,
      skuObj: null,
      skuSelect: 0,
      colorSelect: 0,
      skuImgSelect: 0,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    getGoodsModelList({
      goods_id: this.$route.query.goods_id,
    }).then((res) => {
      if (res.code == 1) {
        this.typeList = res.data;
        this.value1 = this.typeList[0];
        console.log(this.value1);
        this.value2 = this.value1.children[0];
        this.getGoodsDetail();
      }
    });
  },
  //方法集合
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     */
    t(v) {
      return this.$t(`详情页.${v}`);
    },
    addcar() {
      // this.$router.push("buymore");
      // console.log(this.skuSelect);return;
      addShopCart({
        sku_id: this.skuObj.id,
        number: 1,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.$router.push("buymore");
        }
      });
    },
    /**
     * 型号发生改变
     */
    modeChange(mode) {
      if (mode == 0) {
        this.value2 = "";
      } else if (mode == 1) {
        this.getGoodsDetail();
      }
    },
    getGoodsDetail() {
      let { goods_id: x } = this.$route.query;
      getGoodsDetail({
        goods_id: x,
        goods_model_id: this.value2.id,
      }).then((res) => {
        if (res.code == 1) {
          let detail_buf = res.data;
          if (detail_buf.content) {
            const imgRegEx = /<img.*?>/gi;
            detail_buf.content = detail_buf.content.replace(
              imgRegEx,
              (match) => {
                return match.replace(/<img/, '<img style="width:100%;"');
              }
            );
          }
          this.goodsDetail = detail_buf;
          console.log("图片内容--------", this.goodsDetail);
          //左  sku  右 spu
          // this.skuSelect = this.goodsDetail.sku[0];
          this.getGoodsSku();
        }
      });
    },
    getGoodsSku() {
      getGoodsSku({
        goods_id: this.$route.query.goods_id,
        goods_model_id: this.value2.id,
        type_name: this.goodsDetail.spu[0].item[this.skuSelect].name,
        color_name: this.goodsDetail.spu[1].item[this.colorSelect].name,
      }).then((res) => {
        console.log(res);
        if (res.code == 1) {
          console.log("返回的图片----", res.data);
          this.skuObj = res.data;
        }
      });
    },
    skuClick(item, index) {
      this.skuSelect = index;
      // this.skuImgSelect = 0;
      // console.log(this.skuSelect);
      this.getGoodsSku();
    },
    colorClick(obj, index) {
      this.colorSelect = index;
      this.getGoodsSku();
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="less" scoped>
::v-deep .el-input__inner {
  width: 246px !important;
  height: 66px;
}
.cont {
  margin: 30px 105px 0px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  .left {
    width: 30%;

    div {
      .title {
        font-size: 43px;
        color: #222222;
        line-height: 38px;
        font-weight: bold;
      }

      .price {
        font-size: 35px;
        font-weight: bold;
        color: #222222;
        margin: 20px 0px;
      }

      .type {
        .check {
          margin-top: 10px;
          display: flex;

          .el-select {
            width: 250px;
          }

          /deep/ .el-input__inner {
            border: 1px solid #303133;
            // height: 60px;
            font-size: 20px;
          }

          /deep/ .el-input__inner:focus {
            border-color: #ff5757;
          }
        }
      }

      .style {
        margin-top: 30px;

        ul {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          flex-flow: row wrap;
          margin-top: 10px;
          gap: 10px;

          li {
            width: 160px;
            height: 178px;
            border: 1px solid #000000;
            border-radius: 4px;
            cursor: pointer;
            user-select: none;

            .cover-img {
              display: block;
              height: 138px;
              width: 100%;
              overflow: hidden;
              object-fit: scale-down;
            }

            p {
              width: 100%;
              height: 40px;
              background: #ededed;
              border-radius: 0px 0px 4px 4px;
              text-align: center;
              line-height: 40px;
              font-size: 18px;
              color: #222222;
            }
          }

          li[active] {
            border: 1px solid #ff5757;

            p {
              color: #fff;
              background: #ff5757;
            }
          }
        }
      }

      .color {
        margin-top: 20px;

        ul {
          display: flex;
          margin: 20px 0;

          li {
            font-size: 20px;
            margin-right: 15px;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            box-sizing: border-box;
            cursor: pointer;
            user-select: none;
            display: flex;
            justify-content: center;
            align-items: center;

            .color-img {
              width: 26px;
              height: 26px;
              border-radius: 50%;
            }
          }

          li[active] {
            font-weight: bold;
            border: 1px solid #ff5757;
          }
        }
      }

      .shopping {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-flow: row wrap;

        button {
          width: 420px;
          height: 60px;
          background: #ff5757;
          border-radius: 39px;
          text-align: center;
          line-height: 60px;
          border: 0;
          color: #fff;
          margin: 20px 0 10px;
          font-weight: 500;
          font-size: 24px;
          color: #ffffff;
        }

        .pay {
          ul {
            width: 400px;
            display: flex;
            justify-content: space-between;

            li {
              width: 90px;

              img {
                width: 100%;
              }
            }
          }

          p {
            width: 100%;
            text-align: center;
            font-size: 14px;
            font-weight: 400;
            color: #666666;
          }
        }
      }
    }
  }

  .right {
    top: 20px;
    position: sticky;
    width: 60%;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding-top: 30px;

    .show {
      width: 449px;
      height: 850px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: row;
      position: relative;

      .show-img {
        // width: 400px;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .encoding {
        position: absolute;
        right: -100px;
        bottom: 20px;

        img {
          width: 60px;
          height: 60px;
        }

        p {
          font-size: 14px;
          font-weight: 400;
          color: #222222;
        }
      }
    }

    .swiper {
      width: 220px;
      height: 913px;

      .swiper-div {
        width: 200px;
        height: 913px;
        overflow: auto;

        ul {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          gap: 10px;

          li {
            width: 120px;
            height: 144px;
            .swiper-img {
              display: inline;
              width: 100%;
              cursor: pointer;
            }
          }
        }
      }

      // div::-webkit-scrollbar {
      //     width: 6px;
      //     height: 400px;
      //     background-color: #eee;
      // }

      div::-webkit-scrollbar-thumb {
        background-color: #000;
        border-radius: 10px;
      }
    }
  }
}

.details {
  margin-top: 40px;
}

.leftnav {
  width: 70px;
  height: 160px;
  position: fixed;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);

  img {
    width: 70px;
    height: 70px;
    margin-bottom: 10px;
  }
}

.el-select-dropdown__item.selected {
  color: #ff5757;
}
</style>
